import React, { useState, useEffect } from 'react';
import cautionImg from '@/pages/RecruitEmail/images/caution.png';
import styles from './index.less';

export default function FormItem(props) {
    const { children, itemId, label, form } = props;
    const [errorMsg, setErrorMsg] = useState('');
    const [labelVisible, setLabelVisible] = useState(false);
    useEffect(() => {
        console.log('children.props', children.props);
        const { value } = children.props;

        // 显示label
        if (value) {
            setLabelVisible(true);
        } else {
            setLabelVisible(false);
        }
    }, [children.props.value]);
    // 显示错误信息
    useEffect(() => {
        const array = form.getFieldError(itemId);
        if (array && array.length > 0) {
            setErrorMsg(array[0]);
        } else {
            setErrorMsg('');
        }
    }, [form.getFieldError(itemId)]);
    return (
        <div className={styles.formItem}>
            <span className={styles.itemLabel}>{labelVisible ? label : ' '}</span>
            <div className={styles.child}>
                <div className={styles.childContainer}> {children}</div>
                {errorMsg && <img src={cautionImg} className={styles.errImgIcon} alt=""></img>}
            </div>
            {errorMsg && <span className={styles.errMsg}>{errorMsg || ' '}</span>}
        </div>
    );
}
